<div class="tab-motors toolbar_fixed_bottom">
    <div class="content_wrapper">
        <div class="tab_title" data-i18n="tabOutputs"></div>

        <div class="gui_box grey config-section">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="ouptputsConfiguration"></div>
            </div>
            <div class="spacer">
                <div class="checkbox">
                    <input type="checkbox" data-bit="28" class="feature toggle" name="PWM_OUTPUT_ENABLE" title="PWM_OUTPUT_ENABLE" id="feature-28">
                    <label for="feature-28">
                        <span data-i18n="featurePWM_OUTPUT_ENABLE"></span>
                    </label>
                    <div class="helpicon cf_tip" data-i18n_title="featurePWM_OUTPUT_ENABLETip"></div>
                </div>
                <!--list of generated features goes here-->
                <div id="esc-protocols">
                    <div id="esc-protocol-warning" class="warning-box"></div>
                    <div class="select">
                        <select name="esc-protocol" id="esc-protocol"></select>
                        <label for="esc-protocol">
                            <span data-i18n="escProtocol"></span>
                        </label>
                        <div class="helpicon cf_tip" data-i18n_title="escProtocolHelp"></div>
                    </div>
                    <div class="select hide-for-shot">
                        <select name="esc-rate" id="esc-rate"></select>
                        <label for="esc-rate">
                            <span data-i18n="escRefreshRate"></span>
                        </label>
                        <div class="helpicon cf_tip" data-i18n_title="escRefreshRatelHelp"></div>
                    </div>
                    <div class="clear-both"></div>
                </div>

                <div id="servo-rate-container">
                    <div class="select">
                        <select name="servo-rate" id="servo-rate"></select>
                        <label for="servo-rate">
                            <span data-i18n="servoRefreshRate"></span>
                        </label>
                        <div class="helpicon cf_tip" data-i18n_title="servoRefreshRatelHelp"></div>
                    </div>
                    <div class="clear-both"></div>
                </div>

                <div id="motor-stop-warning" data-i18n="motorStopWarning" class="warning-box"></div>
                <div class="checkbox">
                    <input type="checkbox" data-bit="4" class="feature toggle" name="MOTOR_STOP" title="MOTOR_STOP" id="feature-4">
                    <label for="feature-4">
                        <span data-i18n="featureMOTOR_STOP"></span>
                    </label>
                </div>

                <div id="throttle_idle-info" class="info-box"></div>
                <div class="number requires-v2_4">
                    <input id="throttle_idle" data-setting="throttle_idle" type="number" data-step="1.0" />
                    <label for="throttle_idle">
                        <span data-i18n="throttleIdle"></span>
                    </label>
                </div>

                <div class="number requires-v2_4">
                    <input id="motor_poles" data-setting="motor_poles" type="number" />
                    <label for="motor_poles">
                        <span data-i18n="motor_poles"></span>
                    </label>
                </div>
                <div id="reversible-esc-info" data-i18n="reversibleEscWarning" class="info-box"></div>
                <div class="checkbox">
                    <input type="checkbox" data-bit="12" class="feature toggle" name="REVERSIBLE_MOTORS" title="REVERSIBLE_MOTORS" id="feature-12">
                    <label for="feature-12">
                        <span data-i18n="featureREVERSIBLE_MOTORS"></span>
                    </label>
                </div>
            </div>
        </div>
        <div class="gui_box grey">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="motors"></div>
            </div>
            <div class="spacer">
                <div class="left motors">
                    <ul class="titles motor-titles">
                    </ul>
                    <div class="bar-wrapper"></div>
                    <div class="clear-both"></div>
                    <div class="motor_testing">
                    <div class="sliders motor-sliders"></div>
                    <div class="values">
                        <ul class="motor-values"></ul>
                    </div>
                    </div>
                </div>
                <div class="motors right">
                    <div class="half">
                        <div class="mixerPreview">
                            <img src="./resources/motor_order/custom.svg" />
                        </div>
                    </div>
                    <div class="half">
                        <table class="output-stats-table">
                            <tr>
                                <th>Acc. noise RMS</th>
                                <td class="acc-rms"></td>
                            </tr>
                            <tr>
                                <th>Current [A]</th>
                                <td class="current-current"></td>
                            </tr>
                            <tr>
                                <th>Voltage [V]</th>
                                <td class="current-voltage"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="clear-both"></div>
                    <div class="motor_testing_notice">
                        <p i18n="motorsNotice"></p>
                        <label><input id="motorsEnableTestMode" type="checkbox" class="togglesmall"/><span
                            class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
                    </div>
                </div>
                <div class="clear-both"></div>

            </div>
        </div>
        <div class="gui_box grey">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="servos"></div>
            </div>
            <div class="spacer" style="padding-left: 0">
                <div class="servos">
                    <ul class="titles">
                        <li title="Servo - 8">15</li>
                        <li title="Servo - 7">14</li>
                        <li title="Servo - 6">13</li>
                        <li title="Servo - 5">12</li>
                        <li title="Servo - 4">11</li>
                        <li title="Servo - 3">10</li>
                        <li title="Servo - 2">9</li>
                        <li title="Servo - 1">8</li>
                        <li title="Servo - 8">7</li>
                        <li title="Servo - 7">6</li>
                        <li title="Servo - 6">5</li>
                        <li title="Servo - 5">4</li>
                        <li title="Servo - 4">3</li>
                        <li title="Servo - 3">2</li>
                        <li title="Servo - 2">1</li>
                        <li title="Servo - 1">0</li>
                    </ul>
                    <div class="bar-wrapper"></div>
                </div>
            </div>
            <div class="tab-servos" id="servo-config-table-container">
                <table id="servo-config-table" class="fields">
                    <tr class="main">
                        <th width="110px" data-i18n="servosName"></th>
                        <th data-i18n="servosMid"></th>
                        <th data-i18n="servosMin"></th>
                        <th data-i18n="servosMax"></th>
                        <th data-i18n="servosRate"></th>
                        <th data-i18n="servosReverse"></th>
                        <th data-i18n="servoOutput"></th>
                    </tr>
                </table>
                <div class="live">
                    <input type="checkbox" class="togglemedium" /> <span data-i18n="servosLiveMode"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="content_toolbar">
            <div class="btn save_btn">
                <a class="update" href="#" data-i18n="servosButtonSave"></a>
                <a class="save" href="#" data-i18n="configurationButtonSave"></a>
            </div>
        </div>
</div>
